{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\n",
       "Your browser does not support the HTML5 canvas tag.</canvas>\n",
       "\n",
       "<script>\n",
       "var c = document.getElementById(\"myCanvas\");\n",
       "var ctx = c.getContext(\"2d\");\n",
       "\n",
       "// Create gradient\n",
       "var grd = ctx.createRadialGradient(75,50,5,90,60,100);\n",
       "grd.addColorStop(0,\"red\");\n",
       "grd.addColorStop(1,\"white\");\n",
       "\n",
       "// Fill with gradient\n",
       "ctx.fillStyle = grd;\n",
       "ctx.fillRect(10,10,150,80);\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "\n",
    "<canvas id=\"myCanvas\" width=\"200\" height=\"100\" style=\"border:1px solid #d3d3d3;\">\n",
    "Your browser does not support the HTML5 canvas tag.</canvas>\n",
    "\n",
    "<script>\n",
    "var c = document.getElementById(\"myCanvas\");\n",
    "var ctx = c.getContext(\"2d\");\n",
    "\n",
    "// Create gradient\n",
    "var grd = ctx.createRadialGradient(75,50,5,90,60,100);\n",
    "grd.addColorStop(0,\"red\");\n",
    "grd.addColorStop(1,\"white\");\n",
    "\n",
    "// Fill with gradient\n",
    "ctx.fillStyle = grd;\n",
    "ctx.fillRect(10,10,150,80);\n",
    "</script>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<iframe id=\"iframe_4\"></iframe>\n",
       "    \n",
       "<script>\n",
       "var canvas = document.getElementById(\"myCanvas\")\n",
       "var image = canvas.toDataURL()\n",
       "$('#iframe_4').attr('src', image);\n",
       "$('#iframe_4').attr('width', canvas.width + 5);\n",
       "$('#iframe_4').attr('height', canvas.height + 5);\n",
       "</script>\n"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%html\n",
    "\n",
    "<iframe id=\"iframe_4\"></iframe>\n",
    "    \n",
    "<script>\n",
    "var canvas = document.getElementById(\"myCanvas\")\n",
    "var image = canvas.toDataURL()\n",
    "$('#iframe_4').attr('src', image);\n",
    "$('#iframe_4').attr('width', canvas.width + 5);\n",
    "$('#iframe_4').attr('height', canvas.height + 5);\n",
    "</script>\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.4.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}